vue
<template>
  <div class="chat-room-wrapper">
    <div class="chat-window">
      <div class="chat-container">
        <el-container>
          <!-- 左侧侧边栏 -->
          <el-aside width="300px" class="chat-aside">
            <LeftSidebar
              v-model:active-conversation-id="activeConversationId"
              @select-conversation="handleSelectConversation"
            />
          </el-aside>
          <!-- 中间聊天区域 -->
          <el-main class="chat-main">
            <MainChatArea 
              :active-conversation="activeConversation" 
              @avatar-click="handleAvatarClick"
            />
          </el-main>
          <!-- 右侧信息面板 -->
          <el-aside width="200px" class="chat-aside-right">
            <RightInfoPanel :active-contact="activeConversation"
             :selected-user="selectedUser"
             @sentMessage="handleSentMessage"/>
          </el-aside>
        </el-container>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import LeftSidebar from './components/mainPage/LeftSidebar.vue'
import MainChatArea from './components/mainPage/MainChatArea.vue'
import RightInfoPanel from './components/mainPage/RightInfoPanel.vue'

// 定义响应式数据
const activeConversationId = ref(null)  // 当前选中的对应的会话ID
const activeConversation = ref(null)
const selectedUser = ref(null) // 群聊中选中的用户信息

// 方法
const handleSelectConversation = (conversation) => {
  activeConversation.value = null
  activeConversationId.value = conversation.id
  activeConversation.value = conversation
}

// 处理头像点击事件
const handleAvatarClick = (userInfo) => {
  activeConversation.value = null
  selectedUser.value = userInfo
}

// 处理发送消息事件点击
const handleSentMessage = (Info) => {
  // console.log(Info)
  activeConversation.value = null
  activeConversation.value = Info
}
</script>

<style scoped>
.chat-room-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #9ebeed;
  padding: 20px;
}

.chat-window {
  width: 90%;
  max-width: 1200px;
  height: 90vh;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  overflow: hidden;
}
.chat-container {
  height: 100%;
}

.chat-aside {
  background-color: #f7f8fa;
}

.chat-main {
  flex: 1;
  background-color: #f5f5f5;
  padding: 0;
  height: 90vh;
  min-width: 300px;
  overflow: hidden;
  border-right: 1px solid #e5e6eb;
}

.chat-aside-right {
  height: 90vh;
  min-width: 200px;
  background-color: white;
}
</style>